import React, {Component} from 'react'
import {AtNoticebar, AtIcon} from 'taro-ui'
import {Image, Swiper, SwiperItem, View} from '@tarojs/components'
import {getStorageSync, PageNavTo, showToast} from '../../utils/common'
import {getNoticeList, getSayingList, getSwipeList, getClassList} from "../../service/home";
import {getAnnounce} from '../../service/announce'
import './index.scss'

type PageStateProps = {}

type PageDispatchProps = {
  // onSetUserInfo: (userInfo: any) => any,
  // onInit:() => any
}

type PageOwnProps = {}

type PageState = {
  switchList: []
  classList: any
  Wek: string
  noticeBar: string
  noticeList: any[]
  OneSentence: {
    content: string
    auth: string
  },
  everyDayList: {}
  everyDayListLength: number
}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface Index {
  props: IProps;
}

class Index extends Component<IProps, PageState> {
  constructor(props: IProps) {
    super(props);
    this.state = {
      // 轮播列表
      switchList: [],
      // 滚动通知
      noticeBar: '',
      // 课表
      classList: undefined,
      // 星期
      Wek: '',
      // 教务通知
      noticeList: [],
      // 名人名言
      OneSentence: {
        content: '',
        auth: ''
      },
      everyDayList: {},
      everyDayListLength: 0
    }
  }

  componentDidMount() {
    this.onLoadData()
  }

  componentDidShow(){
    this.loadGetUserState()
    if(!this.state.noticeList){
      this.loadGetAnnounceList()
    }
  }

  onLoadData() {
    this.loadGetSwipeList()
    this.loadGetNoticeList()
    this.loadGetSaying()
    this.loadGetUserState()
    this.loadGetAnnounceList()
  }

  async loadGetSwipeList() {
    const res = await getSwipeList()
    if(res.code === 1) {
      this.setState({
        switchList: res.data
      })
    }
  }


  async loadGetNoticeList() {
    const res= await getNoticeList()
    if(res.code ===1) {
      this.setState({
        noticeBar: res.data[0].content
      })
    }
  }

  async loadGetSaying() {
    const res = await getSayingList()
    if(res.code === 1) {
      this.setState({
        everyDayList: res.data,
        everyDayListLength: res.data.length - 1
      })
      this.handleChangeOneSentence()
    }
  }

  async loadGetUserState() {
    const res = getStorageSync('userInfo')
    // console.log(res);
    // let params = {
    //   account: '20181041120',
    //   password: '7603663mm'
    // }
    // let params = {
    //   account: '20171201130',
    //   password: '863996900wm'
    // }
    if (res.edu_account && res.edu_password) {
      let params = {
        account: res.edu_account,
        password: res.edu_password
      }
      let {data} = await getClassList(params)
      let wek = this.getWeekDate()
      this.setState({
        classList: data.contentList,
        Wek: wek
      })
    }
  }

  loadGetAnnounceList = async () => {
    const {data} = await getAnnounce()
    if(!data) return showToast('获取通知公告失败！')
    this.setState({
      noticeList: data.announceList.announce
    })
  }

  // 获取当前周几
  getWeekDate() {
    let now = new Date();
    let day = now.getDay();
    let weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
    return weeks[day];
  }

  //随机出一条语录
  handleChangeOneSentence = () => {
    const {everyDayList} = this.state
    const num = Math.round(Math.random() * (this.state.everyDayListLength));
    this.setState({
      OneSentence: {
        content: everyDayList[num].content,
        auth: everyDayList[num].auth
      }
    })
  }

  // 跳转到教务通知列表
  handleNavigateTo = () => {
    PageNavTo('/pages/detail-notice/index')
  }

  // 跳转到学生认证
  handleNavigateToStu = () => {
    const res = getStorageSync('userInfo')
    if (res) {
      PageNavTo('/pages/stu-auth/index')
    } else {
      showToast('请先登录！')
    }
  }


  filterClassID = (val: number) => {
    switch (val) {
      case 0:
        return '一二节';
      case 1:
        return '三四节';
      case 2:
        return '五六节';
      case 3:
        return '七八节';
      case 4:
        return '九十节';
      case 5:
        return '备注';
      default:
        return '--'
    }
  }

  render() {
    const {switchList, classList, noticeList, OneSentence, noticeBar, Wek} = this.state
    return (
      <View className='main_home'>
        <Swiper
          className='swiper_home'
          indicatorActiveColor='#333'
          circular
          interval={10000}
          autoplay
        >
          {
            switchList.map((item: any, index) => {
              return (<SwiperItem className='swiper_home_item' key={index}>
                <View className='swiper_home_view'>
                  <Image
                    className='swiper_home_img'
                    src={item.address}
                    mode='widthFix'
                  />
                </View>
              </SwiperItem>)
            })
          }
        </Swiper>
        <AtNoticebar className='notice_home' icon='volume-plus' marquee>{noticeBar}</AtNoticebar>
        <View className='cardTable'>
          <View className='cardTable_title'>今日课表</View>
          {
            classList ? <View className='cardTable_content_bind'>
                <View className='Table_list'>
                  <View className='Table_list_title'>{Wek}</View>
                  {
                    classList.length  ?
                      Object.keys(classList).map((item: any, index: number) => {
                        let tab = classList[item][Wek]
                        return (
                          <View className='Table_list_item' key={index}>
                            <View className='Table_list_item_ f-1'>{this.filterClassID(index)}</View>
                            <View className='Table_list_item_ f-5'>
                              {
                                tab ? tab.map((text: any, n: number) => {
                                  if (text) {
                                    return <View> ({n + 1}){text}</View>
                                  } else {
                                    return '--'
                                  }
                                }) : '--'
                              }
                            </View>
                          </View>
                        )
                      })
                      : <View className='Table_list_item anpai'>今日无课程安排</View>
                  }
                </View>
              </View> :
              <View className='cardTable_content_unBind' onClick={this.handleNavigateToStu}>
                <View><AtIcon value='calendar' size='18' color='#999' /></View>
                <View className='text'><View>点击完成学生认证</View><View>查询个人课表</View></View>
              </View>
          }
        </View>
        <View className='cardTable' onClick={this.handleNavigateTo}>
          <View className='cardTable_title'>通知公告</View>
          <View className='cardTable_list'>
            {noticeList.map(item => {
              return (
                <View className='cardTable_list_item' key={item.id}>
                  <View className='cardTable_list_item_left'>{'>'}</View>
                  <View className='cardTable_list_item_center'>{item.content}</View>
                  <View className='cardTable_list_item_right'>{item.time}</View>
                </View>
              )
            })}


          </View>
        </View>
        <View className='cardTable' onClick={this.handleChangeOneSentence}>
          <View className='cardTable_title'>每日一句</View>
          <View className='cardTable_text'>{OneSentence.content}</View>
          <View className='cardTable_auth'>{OneSentence.auth}</View>
        </View>
      </View>
    )
  }
}

export default Index
